<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
   <link rel="stylesheet"  href="user.css">
    <script src="./static/js/vue.global.js"></script>
        <link rel="stylesheet" href="./static/element-plus/index1.css" />
        <script src="./static/element-plus/index.full.js"></script>
         <style>
              img{
                     width: 400px;
                }
            </style>
</head>
<body>
    <div id="app">
         <el-row>
            <el-col :span="12">
                <el-button type="primary" v-on:click="isShow=!isShow">切换显示状态</el-button><br>
                <img v-show="isShow" src="./static/img/carousel0.jpg"/>
            </el-col>
            <el-col :span="12">
                <el-button type="primary" v-on:click="age+=1">增加年龄</el-button>
                <el-button type="primary" v-on:click="age-=1">减小年龄</el-button><br>
            <h2>年龄满足18岁，可以入党，目前年龄：{{age}}</h2><br>
            <img v-show="age>18||age==18" src="./static/img/carousel1.jpg"/>
            </el-col>
         </el-row>
    </div>
</body>
<script>
    const App={
     data(){
return{
    isShow:false,
    age:0,
}
     },
     methods:{
     }
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>
</html>